Sash – Bootstrap5 Admin & Dashboard Template

FAQS

General Style

How to Change Font Style ?

Step 1:

Go To _fonts.scss (assets/scss/custom/fonts/_fonts.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in _fonts.scss

Example:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

And add the Your Selected font-family in _bootstrap-styles.scss(assets/scss/bootstrap/_bootstrap-styles.scss)

Example:


	body {
		margin: 0;
		font-family: "Roboto", sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.5;
		color: $default-color;
		text-align: left;
		background-color: $background;
	}

Note : After Changing font you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

How to change Menu icons ?

By default menu icons are feather icons if you want to change icons please follow below steps

Step 1 :

To change Menu icons, open html page and go through app-sidebar section, in that section you will find feather icons of menu in i tag, there you can replace previous icon with your icon. Example as shown in below

How to Change Logo ?

Go To "assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

How to change Date Format ?

Step 1 :

To change Date Format, you have to add below js (dateFormat: "yy-mm-dd") in respective folder (assets/js/form-elements.js)

Navigation Style

How to Enable Horizontal Click Menu?

Please follow the below steps to enable Horizontal Click Menu Style

Step 1 :

To enable Horizontal Click Menu Style you have to open custom.js (assets/js/custom.js) file and remove comments for horizontal as shown in below



												// ***** Horizontal Click Menu ***** //

												// $('body').addClass('horizontal');

Step 2 :

Remove the comments to enable horizontal as shown below



												// ***** Horizontal Click Menu ***** //

												$('body').addClass('horizontal');

How to Enable Horizontal Hover Menu?

Please follow the below steps to enable Horizontal Hover Menu Style

Step 1 :

To enable Horizontal Hover Menu Style you have to open custom.js (assets/js/custom.js) file and remove comments for horizontal-hover as shown in below



												// ***** Horizontal Hover Menu ***** //

												// $('body').addClass('horizontal-hover');

Step 2 :

Remove the comments to enable horizontal-hover as shown below



												// ***** Horizontal Hover Menu ***** //
												$('body').addClass('horizontal-hover');

How to Enable Horizontal or Horizontal Hover layout With Wrap Style

noWrap style:

open custom.js assets/js/custom.js file and you will find below js in Horizontal (or) Horizontal Hover layout to enable wrap style for Horizontal or Horizontal Hover

noWrap style is given as default horizontal menu style,if you want to change it to wrap style please follow below process.


									document.querySelector('.horizontal .side-menu')?.classList.add('flex-nowrap')
									// $('#slide-left').addClass('d-none');
									// $('#slide-right').addClass('d-none');
									$('#slide-left').removeClass('d-none');
									$('#slide-right').removeClass('d-none');

Related Image:

wrap style:

Replace noWrap with wrap as shown below and remove comments for $('#slide-left').addClass('d-none'); & $('#slide-right').addClass('d-none'); and add comments to $('#slide-left').removeClass('d-none'); & $('#slide-right').removeClass('d-none'); as shown below.


														document.querySelector('.horizontal .side-menu')?.classList.add('flex-wrap')
														$('#slide-left').addClass('d-none');
														$('#slide-right').addClass('d-none');
														// $('#slide-left').removeClass('d-none');
														// $('#slide-right').removeClass('d-none');

Related Image:

How to add horizontal menu for a single page ?

Step 1 :

To enable horizontal menu for a single page please add horizontal class to the body tag for that particular page only.

How to Enable RTL Version

How to Enable RTL Version?

Please follow the below steps to enable RTL Version

Step 1 :

To enable RTL Version you have to open custom.js (assets/js/custom.js) file and remove comments for rtl as shown in below



											/******* RTL VERSION *******/

											// $('body').addClass('rtl');

Step 2 :

Remove the comments to enable rtl as shown below



											/******* RTL VERSION *******/

											$('body').addClass('rtl');

Theme Styles

How to Enable Dark Theme?

Please follow the below steps to enable Dark Theme

Step 1 :

To enable Dark Theme you have to open custom.js (assets/js/custom.js) file and remove comments for dark-mode as shown in below


										//---- Dark mode ----- //
										// $('body').addClass('dark-mode');
										// $('body').removeClass('light-mode');
										// $('body').removeClass('transparent-mode');

Step 2 :

Remove the comments to enable dark-mode as shown below



										//---- Dark mode ----- //
										$('body').addClass('dark-mode');
										$('body').removeClass('light-mode');
										$('body').removeClass('transparent-mode');

How to Enable Transparent Theme?

Please follow the below steps to enable Transparent Theme

Step 1 :

To enable Transparent Theme you have to open custom.js (assets/js/custom.js) file and remove comments for transparent-mode as shown in below



										//---- Transparent mode ----//
										// $('body').addClass('transparent-mode');
										// $('body').removeClass('light-mode');
										// $('body').removeClass('dark-mode');

Step 2 :

Remove the comments to enable transparent-mode as shown below



										//---- Transparent mode ----//
										$('body').addClass('transparent-mode');
										$('body').removeClass('light-mode');
										$('body').removeClass('dark-mode');

Header Styles

How to Enable Color-header?

Please follow the below steps to enable Color-header

Step 1 :

To enable Color-header you have to open custom.js (assets/js/custom.js) file and remove comments for color-header as shown in below



										/******* Header Styles ********/

										//$('body').addClass('color-header')

Step 2 :

Remove the comments to enable color-header as shown below



										/******* Header Styles ********/

										$('body').addClass('color-header')

How to Enable Dark-header?

Please follow the below steps to enable Dark-header

Step 1 :

To enable Dark-header you have to open custom.js (assets/js/custom.js) file and remove comments for dark-header as shown in below



										/******* Header Styles ********/

										//$('body').addClass('dark-header');

Step 2 :

Remove the comments to enable dark-header as shown below



										/******* Header Styles ********/

										$('body').addClass('dark-header');

How to Enable Light-header?

Please follow the below steps to enable Light-header

Step 1 :

To enable Light-header you have to open custom.js (assets/js/custom.js) file and remove comments for light-header as shown in below



										/******* Header Styles ********/

										//$('body').addClass('light-header');

Step 2 :

Remove the comments to enable light-header as shown below



										/******* Header Styles ********/

										$('body').addClass('light-header');

How to Enable Gradient-header?

Please follow the below steps to enable Gradient-header

Step 1 :

To enable Gradient-header you have to open custom.js (assets/js/custom.js) file and remove comments for gradient-header as shown in below



										/******* Header Styles ********/

										//$('body').addClass('gradient-header');

Step 2 :

Remove the comments to enable gradient-header as shown below



										/******* Header Styles ********/

										$('body').addClass('gradient-header');

Menu Styles

How to Enable Light Menu?

Please follow the below steps to enable Light Menu

Step 1 :

To enable Light Menu you have to open custom.js (assets/js/custom.js) file and remove comments for light-menu as shown in below


										/*Left-menu Styles*/
										//$('body').addClass('light-menu');

Step 2 :

Remove the comments to enable light-menu as shown below


										/*Left-menu Styles*/

										$('body').addClass('light-menu');

How to Enable Color Menu?

Please follow the below steps to enable Color Menu

Step 1 :

To enable Color Menu you have to open custom.js (assets/js/custom.js) file and remove comments for color-menu as shown in below


										/*Left-menu Styles*/
										//$('body').addClass('color-menu');

Step 2 :

Remove the comments to enable color-menu as shown below


										/*Left-menu Styles*/
										$('body').addClass('color-menu');

How to Enable Dark Menu?

Please follow the below steps to enable Dark Menu

Step 1 :

To enable Dark Menu you have to open custom.js (assets/js/custom.js) file and remove comments for dark-menu as shown in below


										/*Leftmenu Styles*/
										//$('body').addClass('dark-menu');

Step 2 :

Remove the comments to enable dark-menu as shown below


										/*Leftmenu Styles*/
										$('body').addClass('dark-menu');

How to Enable Gradient Menu?

Please follow the below steps to enable Gradient Menu

Step 1 :

To enable Gradient Menu you have to open custom.js (assets/js/custom.js) file and remove comments for gradient-menu as shown in below


										/*Leftmenu Styles*/
										//$('body').addClass('gradient-menu');

Step 2 :

Remove the comments to enable gradient-menu as shown below


										/*Leftmenu Styles*/
										$('body').addClass('gradient-menu');

Layout Width Styles

How to Enable Boxed-Layout?

Please follow the below steps to enable Boxed-Layout

Step 1 :

To enable Boxed-Layout you have to open custom.js (assets/js/custom.js) file and remove comments for layout-boxed as shown in below


										/*Layout-width Styles*/
										// $('body').addClass('layout-boxed');

Step 2 :

Remove the comments to enable layout-boxed as shown below


										/*Layout-width Styles*/
										$('body').addClass('layout-boxed');

Layout Positions

How to Enable Scrollable-Layout?

Please follow the below steps to enable Scrollable-Layout

Step 1 :

To enable Scrollable-Layout you have to open custom.js (assets/js/custom.js) file and remove comments for scrollable-layout as shown in below


										/*Header-Position Styles*/
										// $('body').addClass('scrollable-layout');

Step 2 :

Remove the comments to enable scrollable-layout as shown below


										/*Header-Position Styles*/
										$('body').addClass('scrollable-layout');

Sidemenu layout Styles

How to Enable Sidemenu-Icon-with Text?

Please follow the below steps to enable Sidemenu-Icon-with Text

Step 1 :

To enable Sidemenu-Icon-with Text you have to open custom.js (assets/js/custom.js) file and remove comments for icontext-menu as shown in below



											// ***** Icon with Text *****//
											// $('body').addClass('icontext-menu');
											// $('body').addClass('sidenav-toggled');
											// if(document.querySelector('.icontext-menu').firstElementChild.classList.contains('login-img') !== true){
											// icontext();
											// }

Step 2 :

Remove the comments to enable icontext-menu as shown below



										// ***** Icon with Text *****//
										$('body').addClass('icontext-menu');
										$('body').addClass('sidenav-toggled');
										if(document.querySelector('.icontext-menu').firstElementChild.classList.contains('login-img') !== true){
										icontext();
										}

How to Enable Sidemenu-Icon Overlay?

Please follow the below steps to enable Sidemenu-Icon Overlay

Step 1 :

To enable Sidemenu-Icon Overlay you have to open custom.js (assets/js/custom.js) file and remove comments for icon-overlay as shown in below



											// ***** Icon Overlay ***** //
											// $('body').addClass('icon-overlay');
											// $('body').addClass('sidenav-toggled');

Step 2 :

Remove the comments to enable icon-overlay as shown below



											// ***** Icon Overlay ***** //
											$('body').addClass('icon-overlay');
											$('body').addClass('sidenav-toggled');

How to Enable Closed Sidemenu?

Please follow the below steps to enable Closed Sidemenu

Step 1 :

To enable Closed Sidemenu you have to open custom.js (assets/js/custom.js) file and remove comments for closed-leftmenu as shown in below



											// ***** closed-leftmenu ***** //
											// $('body').addClass('closed-leftmenu');
											// $('body').addClass('sidenav-toggled')

Step 2 :

Remove the comments to enable closed-leftmenu as shown below



											// ***** closed-leftmenu ***** //
											$('body').addClass('closed-leftmenu');
											$('body').addClass('sidenav-toggled')

How to Enable Hover Sidemenu?

Please follow the below steps to enable Hover Sidemenu

Step 1 :

To enable Hover Sidemenu you have to open custom.js (assets/js/custom.js) file and remove comments for hover-submenu as shown in below



											// ***** hover-submenu ***** //
											// $('body').addClass('hover-submenu');
											// $('body').addClass('sidenav-toggled')
											// if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('login-img') !== true){
											// hovermenu();
											// }

Step 2 :

Remove the comments to enable hover-submenu as shown below



											// ***** hover-submenu ***** //
											$('body').addClass('hover-submenu');
											$('body').addClass('sidenav-toggled')
											if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('login-img') !== true){
											hovermenu();
											}

How to Enable Hover Sidemenu Style 1?

Please follow the below steps to enable Hover Sidemenu Style 1

Step 1 :

To enable Hover Sidemenu Style 1 you have to open custom.js (assets/js/custom.js) file and remove comments for hover-submenu1 as shown in below



											// ***** hover-submenu style 1 ***** //
											// $('body').addClass('hover-submenu1');
											// $('body').addClass('sidenav-toggled')
											// if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('login-img') !== true){
											// hovermenu();
											// }

Step 2 :

Remove the comments to enable hover-submenu1 as shown below



											// ***** hover-submenu style 1 ***** //
											$('body').addClass('hover-submenu1');
											$('body').addClass('sidenav-toggled')
											if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('login-img') !== true){
											hovermenu();
											}

Landing page switcher styles

How to Enable Dark mode for landing page?

Please follow the below steps to enable Dark mode

Step 1 :

To enable Dark mode you have to open landing.js (assets/js/landing.js) file and remove comments for Dark Mode as shown in below


										// DARK MODE
										// $('body').addClass('dark-mode');

Step 2 :

Remove the comments to enable dark-mode as shown below



										// DARK MODE
										$('body').addClass('dark-mode');

How to Enable RTL for landing page?

Please follow the below steps to enable RTL

Step 1 :

To enable RTL you have to open landing.js (assets/js/landing.js) file and remove comments for RTL as shown in below


										// RTL
										// $('body').addClass('rtl');

Step 2 :

Remove the comments to enable RTL as shown below



										// RTL
										$('body').addClass('rtl');